<template>
  <div>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="68%" :before-close="handleClose" @open="handleOpen">
      <!-------------- 审核对话框 -------------->
      <div class="preview">
        <el-row>
          <el-col :span="6">【题型】 : {{ questionType }}</el-col>
          <el-col :span="6">【编号】 : {{ preDate.id }}</el-col>
          <el-col :span="6">【难度】 : {{ difficulty }}</el-col>
          <el-col :span="6">【标签】 : {{ preDate.tags }}</el-col>
          <el-col style="margin-top:15px" :span="6">【学科】 : {{ preDate.subjectName }}</el-col>
          <el-col style="margin-top:15px" :span="6">【目录】 : {{ preDate.catalogID }}</el-col>
          <el-col style="margin-top:15px" :span="6">【方向】 : {{ preDate.direction }}</el-col>
        </el-row>
        <hr>
        <p>【题干】 : </p>
        <p v-html="preDate.question" />
        <p>{{ questionType }}题 选项:（以下选中的选项为正确答案）</p>
        <!-- 单选题 -->
        <el-radio-group v-if="questionType==='单选'" v-model="radio">
          <el-radio v-for="item in preDate.options" :key="item.id" style="margin-bottom: 15px;display: block;" :label="item.title">
            <template #default="{row}">
              {{ item.code }}. {{ row }}
            </template>
          </el-radio>
        </el-radio-group>
        <!-- 多选题 -->
        <el-checkbox-group v-else-if="questionType==='多选'" v-model="checkList">
          <el-checkbox v-for="item in preDate.options" :key="item.id" style="margin-bottom: 15px;display: block;" :label="item.title">
            <template #default="{row}">
              {{ item.code }}. {{ row }}
            </template>
          </el-checkbox>
        </el-checkbox-group>
        <!-- 简答题 -->
        <hr>
        【参考答案】: <el-button size="mini" type="danger" @click="videoVisible=true">视频答案预览</el-button><br>
        <video v-if="videoVisible" width="50%" :src="preDate.videoURL" controls="controls" />
        <hr>
        <h4>【答案解析】:</h4>
        <p v-html="preDate.answer" />
        <h4>【题目备注】:</h4>
        <p v-html="preDate.remarks" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="transform: translateY(-75%);float:right" type="primary" @click="handleClose"> 关 闭 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    giveDialogDate: {
      type: Number,
      required: true
    },
  },
  data () {
    return {
      videoVisible: false, // 音频控制开关
      checkList: [], // 多选题答案
      radio: "", // 单选题正确答案
      preDate: {} // 弹窗数据
    };
  },
  computed: {
    // 格式化难度
    difficulty () {
      const ret = difficulty.find(item => item.value === parseInt(this.preDate.difficulty));
      if (ret) {
        return ret.label
      } else {
        return '其他'
      }
    },
    // 格式化题型
    questionType () {
      const ret = questionType.find(item => item.value === parseInt(this.preDate.questionType));
      if (ret) {
        return ret.label
      } else {
        return '其他'
      }
    }
  },
  methods: {
    // 打开弹窗获取数据
    async handleOpen () {
      try {
        const ret = await detail({ id: this.giveDialogDate })
        this.preDate = ret.data
        // 保存当前单选题答案
        const val = this.preDate.options
        if (this.questionType === '单选') {
          const radioList = val.find(item => item.isRight === 1)
          this.radio = radioList.title
        } else if (this.questionType === '多选') {
          // 保存当前多选题答案
          const checkret = val.filter(item => item.isRight === 1)
          checkret.forEach(ele => {
            this.checkList.push(ele.title)
          });
        }
      } catch (err) {
        console.log(err);
        this.$message.warning('预览信息获取失败')
      }
    },
    // 对话框开关
    handleClose () {
      this.$emit('update:dialogVisible', false)
      // 清空数据
      this.preDate = this.$options.data().preDate
      this.videoVisible = false
    }
  }
}
</script>

<style scoped lang='less'>
.el-radio-group {
  .el-radio {
    margin-bottom: 50px;
    display: block;
  }
}
</style>
